<template>
  <div>
    <a-modal
      dialogClass="addorediteModel"
      v-model:visible="visible"
      :title="getTitle"
      width="800px"
      @ok="handleOk"
      @cancel="cancel"
    >
      <div class="copypermis">
        <a-form
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="formData"
          ref="formRef"
          :rules="rules"
        >
          <a-row>
            <a-col :span="12">
              <div class="title">基础配置</div>
              <a-form-item label="名称" name="name">
                <a-input
                  v-model:value="formData.name"
                  placeholder="请输入名称"
                  size="small"
                  allowClear
                />
              </a-form-item>
              <a-form-item label="自编码" name="code">
                <a-input
                  v-model:value="formData.code"
                  placeholder="请输入自编码"
                  size="small"
                  allowClear
                />
              </a-form-item>
              <a-form-item label="品牌商" name="brand_id">
                <a-select
                  allowClear
                  size="small"
                  placeholder="请选择品牌商"
                  v-model:value="formData.brand_id"
                  @change="handleChangebrand_id"
                >
                  <a-select-option
                    v-for="(item, index) in brandOptions"
                    :key="index"
                    :value="item?.id"
                    >{{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="型号" name="device_type_id">
                <a-select
                  allowClear
                  size="small"
                  placeholder="请选择型号"
                  v-model:value="formData.device_type_id"
                  @change="handleChangetype"
                >
                  <a-select-option
                    v-for="(item, index) in deviceTypeOptions"
                    :key="index"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item label="物模型" name="device_mode_id">
                <a-select
                  allowClear
                  size="small"
                  placeholder="请选择物模型"
                  v-model:value="formData.device_mode_id"
                  @change="handleChangemodel"
                >
                  <a-select-option
                    v-for="(item, index) in deviceModeOptions"
                    :key="index"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>

              <a-form-item label="设备分类" name="category_id">
                <a-select
                  allowClear
                  size="small"
                  placeholder="请选择设备分类"
                  v-model:value="formData.category_id"
                >
                  <a-select-option
                    v-for="(item, index) in eqtClassOptions"
                    :key="index"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>

              <a-form-item label="停用">
                <a-switch
                  disabled
                  v-model:checked="formData.disable"
                  checkedValue="1"
                  unCheckedValue="0"
                />
              </a-form-item>

              <a-form-item label="设备标签" name="tag_list">
                <tags @ok="(e) => tagsOk(e)" :taglist="formData.tag_list" v-if="isreload" />
              </a-form-item>

              <a-form-item label="图片" name="bg_img">
                <uploadimg @sendIMGInfo="sendIMGInfo" :bgimg="formData.bg_img" v-if="isreload" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <div class="title">配置信息</div>
              <!-- tcp_udp协议 -->
              <div v-if="connect_type == 'tcp_udp'">
                <a-form-item label="序列号(设备编码)" name="device_serial">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.device_serial"
                    placeholder="请输入序列号(设备编码)"
                  />
                </a-form-item>
                <a-form-item label="类型" name="connect_mode">
                  <a-select
                    allowClear
                    size="small"
                    placeholder="请选择类型"
                    v-model:value="formData.connect_mode"
                    :options="connectmodelist"
                  />
                </a-form-item>
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
              </div>
              <!-- modbus协议 -->
              <div v-if="connect_type == 'modbus'">
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="地址" name="address">
                  <a-input
                    size="small"
                    v-model:value="formData.address"
                    placeholder="请输入地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="用户名" name="username">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.username"
                    placeholder="请输入用户名"
                  />
                </a-form-item>
                <a-form-item label="密码" name="password">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.password"
                    placeholder="请输入密码"
                  />
                </a-form-item>
              </div>
              <!-- {{ connect_type }} -->
              <!-- http协议 -->
              <div v-if="connect_type == 'http' || connect_type == 'mqtt'">
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="用户名" name="username">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.username"
                    placeholder="请输入用户名"
                  />
                </a-form-item>
                <a-form-item label="密码" name="password">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.password"
                    placeholder="请输入密码"
                  />
                </a-form-item>
                <a-form-item label="目录" name="url">
                  <a-input
                    size="small"
                    v-model:value="formData.url"
                    placeholder="请输入目录"
                    allowClear
                  />
                </a-form-item>
                <div v-if="connect_type == 'http'">
                  <a-form-item label="地址" name="address">
                    <a-input
                      size="small"
                      v-model:value="formData.address"
                      placeholder="请输入地址"
                      allowClear
                    />
                  </a-form-item>
                </div>
              </div>
              <!-- smb协议 -->
              <div v-if="connect_type == 'smb'">
                <a-form-item label="序列号(设备编码)" name="device_serial">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.device_serial"
                    placeholder="请输入序列号(设备编码)"
                  />
                </a-form-item>
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="用户名" name="username">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.username"
                    placeholder="请输入用户名"
                  />
                </a-form-item>
                <a-form-item label="密码" name="password">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.password"
                    placeholder="请输入密码"
                  />
                </a-form-item>
                <a-form-item label="目录" name="url">
                  <a-input
                    size="small"
                    v-model:value="formData.url"
                    placeholder="请输入目录"
                    allowClear
                  />
                </a-form-item>
              </div>
              <!-- s7协议 -->
              <div v-if="connect_type == 's7'">
                <a-form-item label="序列号(设备编码)" name="device_serial">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.device_serial"
                    placeholder="请输入序列号(设备编码)"
                  />
                </a-form-item>
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="机架" name="rack">
                  <a-input
                    size="small"
                    v-model:value="formData.rack"
                    placeholder="请输入机架"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="槽位" name="slot">
                  <a-input
                    size="small"
                    v-model:value="formData.slot"
                    placeholder="请输入槽位"
                    allowClear
                  />
                </a-form-item>
              </div>
              <!-- opcua协议 -->
              <div v-if="connect_type == 'opcua'">
                <a-form-item label="序列号(设备编码)" name="device_serial">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.device_serial"
                    placeholder="请输入序列号(设备编码)"
                  />
                </a-form-item>
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="用户名" name="username">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.username"
                    placeholder="请输入用户名"
                  />
                </a-form-item>
                <a-form-item label="密码" name="password">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.password"
                    placeholder="请输入密码"
                  />
                </a-form-item>
                <a-form-item label="目录" name="url">
                  <a-input
                    size="small"
                    v-model:value="formData.url"
                    placeholder="请输入目录"
                    allowClear
                  />
                </a-form-item>
              </div>

              <!-- odbc协议 -->
              <div v-if="connect_type == 'odbc'">
                <a-form-item label="IP地址" name="host">
                  <a-input
                    size="small"
                    v-model:value="formData.host"
                    placeholder="请输入IP地址"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="端口" name="port">
                  <a-input
                    size="small"
                    v-model:value="formData.port"
                    placeholder="请输入端口"
                    allowClear
                  />
                </a-form-item>
                <a-form-item label="用户名" name="username">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.username"
                    placeholder="请输入用户名"
                  />
                </a-form-item>
                <a-form-item label="密码" name="password">
                  <a-input
                    allowClear
                    size="small"
                    v-model:value="formData.password"
                    placeholder="请输入密码"
                  />
                </a-form-item>
              </div>
              <a-form-item label="系数">
                <a-input
                  size="small"
                  v-model:value="formData.coefficient"
                  placeholder="请输入系数"
                  allowClear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, Ref, reactive, computed, unref, onMounted, nextTick } from 'vue';
  import uploadimg from '../../components/uploadimg.vue';
  import tags from '/@/components/Form/src/components/tags.vue';

  import {
    AddEquipmentList,
    ModifyEquipmentList,
    getBarndListApi,
    getDeviceTypeListApi,
    getDeviceModeList,
  } from '/@/api/sys/gateway/gateway';
  import { alleqtClass } from '/@/api/sys/brand/brand';
  export default defineComponent({
    components: { tags, uploadimg },
    props: {
      isUpdate: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['success'],
    setup(props, { emit }) {
      //显示隐藏弹框
      const visible = ref(false);
      //品牌商下拉列表
      const brandOptions: Ref<any> = ref([]);
      const deviceTypeOptions: Ref<any[]> = ref([]);
      const deviceModeOptions: Ref<any[]> = ref([]);
      const eqtClassOptions: Ref<any[]> = ref([]);
      const connect_type = ref('modbus');
      const connectmodelist = reactive([
        {
          label: 'TCP',
          value: 'TCP',
        },
        {
          label: 'UDP',
          value: 'UDP',
        },
      ]);
      //复制
      // async function copy(text) {
      //   if (text == undefined) {
      //     createMessage.warn('暂无数据');
      //     return false;
      //   }
      //   let target = document.createElement('input'); //创建input节点
      //   target.value = text; // 给input的value赋值
      //   document.body.appendChild(target); // 向页面插入input节点
      //   target.select(); // 选中input
      //   try {
      //     await document.execCommand('Copy'); // 执行浏览器复制命令
      //     createMessage.success('复制成功');
      //   } catch {
      //     createMessage.error('复制失败');
      //   }
      // }
      //获取品牌列表
      function getBrandList() {
        getBarndListApi().then((res) => {
          brandOptions.value = res;
        });
      }
      //获取设备分类列表
      function geteqtClassList() {
        alleqtClass().then((res: any) => {
          eqtClassOptions.value = res.list;
        });
      }

      //切换物模型
      async function handleChangemodel(e) {
        return new Promise((resolve) => {
          let data = deviceModeOptions.value.find((val) => val.id == e);
          connect_type.value = data.connect_type;
          resolve(true);
        });
      }
      //上传图片回调
      function sendIMGInfo(img_url) {
        formData.bg_img = img_url;
      }
      //编辑标签
      function tagsOk(e) {
        formData.tag_list = e;
      }

      //切换品牌商
      function handleChangebrand_id(e) {
        formData.device_type_id = undefined;
        getDeviceTypeListApi({
          brand_id: e,
        }).then((res: any) => {
          deviceTypeOptions.value = res.list;
        });
      }
      //切换型号
      function handleChangetype(e) {
        return new Promise((resolve) => {
          getDeviceModeList({ device_type_id: e, page: 1, page_size: 99999999999 }).then(
            (res: any) => {
              deviceModeOptions.value = res.list;
              resolve(true);
            },
          );
        });
      }

      //表单数据
      const formData: any = reactive({
        code: '',
        name: '',
        device_mode_id: undefined,
        brand_id: undefined,
        device_type_id: undefined,
        host: '',
        port: '',
        username: '',
        password: '',
        url: '',
        address: '',
        tag_list: [],
        bg_img: '',
        rack: '',
        slot: '',
        category_id: '',
        coefficient: '',
        disable: '1',
      });

      //表单验证
      let rules = {
        name: {
          required: true,
          message: '请输入名称',
        },
        device_mode_id: {
          required: true,
          message: '请输入物模型',
        },
        code: {
          required: true,
          message: '请输入自编码',
        },

        brand_id: {
          required: true,
          message: '请选择品牌商',
        },

        category_id: {
          required: true,
          message: '请选择设备分类',
        },

        device_type_id: {
          required: true,
          message: '请选择型号',
        },
      };
      //添加
      function add(record) {
        isreload.value = false;
        formData.code = record.code;
        formData.name = record.name;
        formData.device_mode_id = record.device_mode_id;
        formData.brand_id = record.brand_id;
        formData.device_type_id = record.device_type_id;
        formData.host = record.host;
        formData.port = record.port;
        formData.username = record.username;
        formData.password = record.password;
        formData.url = record.url;
        formData.address = record.address;
        formData.tag_list = record.tag_list ? record.tag_list : [];
        formData.disable = '1';
        formData.bg_img = record.bg_img;
        formData.id = record.id;
        formData.device_serial = record.device_serial;
        formData.connect_mode = record.connect_mode;
        formData.rack = record.rack;
        formData.slot = record.slot;
        formData.category_id = record.category_id;
        formData.coefficient = record.coefficient;
        nextTick(() => {
          isreload.value = true;
          visible.value = true;
        });
      }
      const isreload = ref(true);
      //获取编辑详情
      async function getediteDetail(record) {
        handleChangebrand_id(record.brand_id);
        let istruedevice_type = await handleChangetype(record.device_type_id);
        isreload.value = false;
        if (istruedevice_type) {
          let istrue = await handleChangemodel(record.device_mode_id);
          if (istrue) {
            formData.code = record.code;
            formData.name = record.name;
            formData.device_mode_id = record.device_mode_id;
            formData.brand_id = record.brand_id;
            formData.device_type_id = record.device_type_id;
            formData.host = record.host;
            formData.port = record.port;
            formData.username = record.username;
            formData.password = record.password;
            formData.url = record.url;
            formData.address = record.address;
            formData.tag_list = record.tag_list ? record.tag_list : [];
            formData.disable = record.disable === '0' ? record.disable : '1';
            formData.bg_img = record.bg_img;
            formData.id = record.id;
            formData.device_serial = record.device_serial;
            formData.connect_mode = record.connect_mode;
            formData.rack = record.rack;
            formData.slot = record.slot;
            formData.category_id = record.category_id;
            formData.coefficient = record.coefficient;
            isreload.value = true;
            visible.value = true;
          }
        }
      }

      const formRef = ref();
      const getTitle = computed(() => (!unref(props.isUpdate) ? '新建' : '修改'));
      //保存
      const handleOk = () => {
        formRef.value
          .validate()
          .then(() => {
            let obj = JSON.parse(JSON.stringify(formData));
            if (obj.coefficient == '') {
              delete obj.coefficient;
            }
            if (obj.port == '') {
              obj.port = null;
            }
            if (props.isUpdate) {
              ModifyEquipmentList(obj).then(() => {
                emit('success', { isUpdate: unref(props.isUpdate) });
                cancel();
              });
            } else {
              AddEquipmentList(obj).then(() => {
                emit('success', { isUpdate: unref(props.isUpdate) });
                cancel();
              });
            }
          })
          .catch((error) => {
            console.log('error', error);
          });
      };

      onMounted(() => {
        getBrandList();
        geteqtClassList();
      });

      //取消
      const cancel = () => {
        formRef.value.resetFields();
        visible.value = false;
      };
      return {
        connect_type,
        connectmodelist,
        handleChangemodel,
        rules,
        isreload,
        tagsOk,
        sendIMGInfo,
        deviceTypeOptions,
        deviceModeOptions,
        eqtClassOptions,
        handleChangetype,
        brandOptions,
        getediteDetail,
        add,
        getTitle,
        formRef,
        handleChangebrand_id,
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
        visible,
        formData,
        handleOk,
        cancel,
      };
    },
  });
</script>
<style>
  .copypermis .ant-form-item-control-input-content {
    display: flex;
  }
  .addorediteModel .ant-modal-close {
    width: 80px !important;
  }
</style>

<style lang="less" scoped>
  .copypermis {
    padding: 20px 20px 0px;
    box-sizing: border-box;

    .title {
      margin: 20px 0px;
      font-weight: 600;
      font-size: 14px;
      padding-left: 7px;
      box-sizing: border-box;
    }
  }
</style>
